
<template>
    <div>
        <!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="formDate">
    <el-form-item label="是否是主图" :label-width="formLabelWidth">
      <el-input v-model="formDate.imgMasterMap" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="图片类别" :label-width="formLabelWidth">
      <el-input v-model="formDate.imgType" autocomplete="off"></el-input>
    </el-form-item>

     <el-form-item label="图片地址" prop="imgUrl" >
    <el-upload ref="imgUrl" :file-list="imgUrlfileList" :action="imgUrlAction"
      :before-upload="imgUrlBeforeUpload" :on-success="imgsuccess" list-type="picture-card" accept="image/*">
      <i class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible===create()">确 定</el-button>
  </div>
</el-dialog>




        <el-row>
  <el-col :span="4" v-for="(obj, index) in dataTable" :key="obj" :offset="index > 0 ? 1 : 0">
    <el-card :body-style="{ padding: '0px' }">
      <img :src="obj.imgUrl" class="image" style="height:200px;width:200px;">
      <div style="padding: 14px;">
        <span>{{obj.imgType}}</span>
        <div class="bottom clearfix">
          <time class="time">{{ obj.imgMasterMap }}</time><br>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
    </div>
</template>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      dataTable:[],
        formDate:{
          imgUrl:undefined,
          imgMasterMap:undefined,
          imgType:undefined,
           
        },
         imgUrlAction: 'https://localhost:44354/api/app/show/upload',
          imgUrlfileList: [],
          dialogFormVisible: false,
        formLabelWidth: '120px'
    };  
  },
  
   mounted(){
        this.GetList();
    },
   methods:{
     create(){
       this.axios
       .post("https://localhost:44354/api/app/show/imgurl/",this.formDate)
       .then();
       {
         this.$notify({
        title: '成功',
        message: '添加成功',
        type: 'success',
        duration: 2000
        
      })
      this.GetList();
      this.dialogFormVisible=false;
      
       }
     },
        GetList()
        {
            this.axios
            .get("https://localhost:44354/api/app/tb-img-app-services")
            .then(s=>{

                this.dataTable=s.data.items
            })
        },
        imgsuccess(str,file)
    {
      this.formDate.imgUrl=file.response;
      
    },
    

    
      resetForm() {
      this.$refs['elForm'].resetFields()
    },
    imgUrlBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2GB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
},
}
</script>





